<template>
	<view>
		<view class="query-flex">
			<view class="ex-con-list">
				<view class="ex-list">工单号</view>
				<view class="ex-list">工单状态:</view>
				<view class="ex-list">设备编码:</view>
				<view class="ex-list">设备名称:</view>
				<view class="ex-list">使用部门:</view>
				<view class="ex-list">位置:</view>
				<view class="ex-list">来源单据:</view>
			</view>

			<u-row gutter="16" class="ex-con">
				<u-col span="4">
					<view class="ex-flex center-flex"><text>概要信息</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex"><text>作业方案</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex"><text>查看计划物料</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex" @click="materiel"><text>追加物料</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex"><text>申请退料</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex"><text>维修实际人员</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex"><text>拍照</text></view>
				</u-col>
				<u-col span="4">
					<view class="ex-flex center-flex"><text>完工</text></view>
				</u-col>
			</u-row>
		</view>

		<!-- 按钮 -->
		<view class="button-con">
			<view class="button-return">
				<view class="button">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			materiel() {
				uni.navigateTo({
					url: 'pages/Workorder/Diagnosis/ViewMaterial'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 列表
	.ex-con-list {
		padding: 40rpx;

		.ex-list {
			font-size: 15px;
			margin-bottom: 10rpx;
		}
	}

	.ex-con {
		padding: 10rpx;
		display: flex;

		.ex-flex {
			flex: 1;
			font-weight: 700;
			margin: 10rpx;
			color: #fff;
			font-size: 15px;
			padding: 20rpx;
			height: 120rpx;
			border-radius: 16rpx;
			background-color: #fabb1a;
		}

		// 文字上下居中
		.center-flex {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
</style>
